<template>
  <div>
    <div class="header">
        <input v-model="keywords" />
    </div>
    <v-song-list v-if="songList" title="搜索结果" :list="formatList(songList.songs)" @optSong="getSong">
        <template slot="right">
            <!-- slot-scope="{row}" -->
            <mu-menu cover>
              <v-svg-icon iconClass="more" size="md" />
              <mu-list slot="content">
                  <mu-list-item button>
                      <mu-list-item-title>Refresh</mu-list-item-title>
                  </mu-list-item>
              </mu-list>
            </mu-menu>
        </template>
    </v-song-list>
    <a-player style="width: 100%; height: 66px" ref="audioRef" autoplay fixed :audio="audio" :lrc-type="1" />
  </div>
</template>

<script lang="ts">
import vSongList from '@/components/SongList.vue';
import vSvgIcon from '@/components/YyIcon.vue';
import {
    defineComponent, ref, computed, nextTick
} from '@vue/composition-api';
import useQuery from '@/utils/useQuery';
import {
    getSearchRec, getExactSong, SearchRec, Song, getSongLrc,
} from '@/api/search';
import { useState } from '@/utils';

interface AudioInfo {
  name: string;
  artist: string;
  url: string;
  cover: string
  lrc: string
}

export default defineComponent({
    components: {
      vSongList,
      vSvgIcon
    },
    setup() {
        // const { proxy: { $request } } = getCurrentInstance()!;
        const audioRef = ref<HTMLAudioElement | null>(null)
        const keywords = ref('');
        const [audio, setAudio] = useState<AudioInfo>({
            name: '',
            artist: '',
            url: '',
            cover: '',
            lrc: '',
        });
        // computed
        const isEnabled = computed(() => !!keywords.value);
        // query
        const { data: songList, isLoading } = useQuery<SearchRec>(keywords, () => getSearchRec(keywords.value), {
            enabled: isEnabled,
        });
        function formatList (list: Song[] = []) {
          return list.map(song => {
            return {
              id: song.id,
              name: song.name,
              artist: song.artists[0].name,
              artists: song.artists
            }
          })
        }
        async function getSong(item: Song & { artist: string }) {
           console.log(item);
            const { name, artists, id, artist } = item;
            const song = await getExactSong(id);
            const songLrc = await getSongLrc(id);
            setAudio({
                name,
                artist: artist,
                url: song[0] ? song[0].url : '',
                cover: artists[0] ? artists[0].img1v1Url : '',
                lrc: songLrc.lyric || '',
            });
            await nextTick()
            audioRef.value && audioRef.value.play()
        }
        return {
            audioRef,
            keywords,
            isLoading,
            songList,
            audio,
            getSong,
            formatList,
        };
    },
});
</script>

<style lang="less">
.header {
    position: sticky;
    top: 0px;
    height: 40px;
    background-color: rgb(196, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    input {
      border: none;
      border-radius: 15px;
      width: 70%;
      height: 60%;
      outline: none;
      padding: 0 8px;
    }
}
</style>
